<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery日期选择器插件自定义多种日期选择</title>
<meta name="description" content="jquery插件制作一款日期选择器插件，可自定义多种日期选择展示效果，默认显示平铺日期选择器、点击触发日期选择器、设置规定范围时间内日期选择器、点击图标按钮触发日期选择器等。" />
</head>

<body>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	//实例一
	$('#date').DatePicker({
		flat: true,
		date: '2012-07-31',
		current: '2012-07-31',
		calendars: 1,
		starts: 1,
		view: 'years'
	});
	
	//实例二
	var now = new Date();
	now.addDays(-10);
	var now2 = new Date();
	now2.addDays(-5);
	now2.setHours(0,0,0,0);
	$('#date2').DatePicker({
		flat: true,
		date: ['2012-07-31', '2012-07-28'],
		current: '2012-07-31',
		format: 'Y-m-d',
		calendars: 1,
		mode: 'multiple',
		onRender: function(date) {
			return {
				disabled: (date.valueOf() < now.valueOf()),
				className: date.valueOf() == now2.valueOf() ? 'datepickerSpecial' : false
			}
		},
		onChange: function(formated, dates) {
		},
		starts: 0
	});
	
	//实例三
	$('#date3').DatePicker({
		flat: true,
		date: ['2009-12-28','2010-01-23'],
		current: '2010-01-01',
		calendars: 3,
		mode: 'range',
		starts: 1
	});
	
	//实例四
	$('.inputDate').DatePicker({
		format:'Y-m-d',
		date: $('#inputDate').val(),
		current: $('#inputDate').val(),
		starts: 1,
		position: 'right',
		onBeforeShow: function(){
			$('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
		},
		onChange: function(formated, dates){
			$('#inputDate').val(formated);
			$('#inputDate').DatePickerHide();
		}
	});
	
	
	//实例五
	var now3 = new Date();
	now3.addDays(-4);
	var now4 = new Date()
	$('#widgetCalendar').DatePicker({
		flat: true,
		format: 'Y , B d',
		date: [new Date(now3), new Date(now4)],
		calendars: 3,
		mode: 'range',
		starts: 1,
		onChange: function(formated) {
			$('#widgetField span').get(0).innerHTML = formated.join(' — ');
		}
	});
	var state = false;
	$('#widgetField>a').bind('click', function(){
		$('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
		state = !state;
		return false;
	});

});
</script>

<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serifl;color:#5a5a5a;}
/* pagedemo */
.pagedemo{width:700px;margin:0 auto;text-align:left;}
.pagedemo h1{font-size:21px;height:47px;line-height:47px;text-transform:uppercase;}
.tabsContent{border:1px solid #ccc;width:698px;overflow:hidden;}
.tab{padding:16px;display:block;}
.tab h2{font-weight:bold;font-size:16px;}
.tab h3{font-weight:bold;font-size:14px;margin-top:20px;}
.tab p{margin-top:16px;clear:both;}
.tab ul{margin-top:16px;list-style:disc;}
.tab li{margin:10px 0 0 35px;}
.tab a{color:#8FB0CF;}
.tab strong{font-weight:bold;}
.tab pre{font-size:11px;margin-top:20px;width:668px;overflow:auto;clear:both;}
.tab table{width:100%;}
.tab table td{padding:6px 10px 6px 0;vertical-align:top;}

input.inputDate{border:1px solid #999;padding:4px;border-bottom-color:#ddd;border-right-color:#ddd;width:165px;}
#widget{position:relative;}
#widgetField{width:290px;height:26px;background:url(images/field.png);overflow:hidden;position:relative;}
#widgetField a{display:block;position:absolute;width:26px;height:26px;top:0;right:0;text-decoration:none;text-indent:-3000px;}
#widgetField span{font-size:12px;font-weight:bold;color:#000;position:absolute;top:0;height:26px;line-height:26px;left:5px;width:250px;text-align:center;}
#widgetCalendar{position:absolute;top:26px;left:0;height:0px;overflow:hidden;width:588px;background:#B9B9B9;}
</style>

<div class="pagedemo">
	<h1>日期选择器 - jQuery插件</h1>
	<div class="tabsContent">
		<div class="tab">
			<h2>介绍</h2>
			<p>有很多选择的日期选择器组件，易于安装在您的Web应用程序。</p>
			<h3>特征</h3>
			<ul>
				<li>平板模式 - 元素在页面</li>
				<li>在组件的多个日历</li>
				<li>允许单个，多个或选择范围</li>
				<li>标记日期作为特殊的，周末的时候，特别的日子</li>
				<li>容易通过改变CSS自定义的外观</li>
				<li>本地化格式年月日</li>
				<li>自定义一周开始的一天</li>
				<li>适合到视口</li>
			</ul>
			
			 <h3>实例</h3>
			 <p>1、平板模式，单一的选择，周一的一周开始。</p>
			<p id="date"></p>
			
		<pre>$('#date').DatePicker({
	flat: true,
	date: '2012-07-31',
	current: '2012-07-31',
	calendars: 1,
	starts: 1
});</pre>
			<p>2、平板模式，多重选择，停用的日期，特殊的日子，本周开始周日。</p>
			<p id="date2"></p>
		<pre>$('#date2').DatePicker({
	flat: true,
	date: ['2012-07-31', '2012-07-28'],
	current: '2012-07-31',
	format: 'Y-m-d',
	calendars: 1,
	mode: 'multiple',
	onRender: function(date) {
		return {
			disabled: (date.valueOf() < now.valueOf()),
			className: date.valueOf() == now2.valueOf() ? 'datepickerSpecial' : false
		}
	},
	starts: 0
});</pre>
			<pre>$('#date3').DatePickerClear();</pre>
			<p>3、平板模式，选择范围，3个日历。</p>
			<p id="date3"></p>
		<pre>$('#date3').DatePicker({
	flat: true,
	date: ['2012-07-28','2012-07-31'],
	current: '2012-07-31',
	calendars: 3,
	mode: 'range',
	starts: 1
});</pre>
			<p>4、连接到一个文本字段，并使用回调函数的值从外地到更新的日期选择。</p>
			<p>
				<input class="inputDate" id="inputDate" value="2012-06-14" />
			</p>
		<pre>$('#inputDate').DatePicker({
	format:'m/d/Y',
	date: $('#inputDate').val(),
	current: $('#inputDate').val(),
	starts: 1,
	position: 'r',
	onBeforeShow: function(){
		$('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
	},
	onChange: function(formated, dates){
		$('#inputDate').val(formated);
		$('#inputDate').DatePickerHide();
	}
});</pre>
			<p>5、平板模式，在自定义部件和定制设计。</p>
			<div id="widget">
				<div id="widgetField">
					<span>2012 , 七月 28 — 2012 , 七月 31</span>
					<a href="#">Select date range</a>
				</div>
				<div id="widgetCalendar">
				</div>
			</div>
			<p>&nbsp;</p>
			
			 <h3>选项</h3>
			<p>参数列表。所有的参数都是可选的。</p>
			<table>
				<tr>
					<td><strong>eventName</strong></td>
					<td>string</td>
					<td>所需的事件来触发的日期选择器。默认：“点击'</td>
				</tr>
				<tr>
					<td><strong>date</strong></td>
					<td>String, Date or array</td>
					<td>选定的日期（S）为字符串（将被转换为Date对象的基础上德格式suplied）和单一选择的日期对象，数组，字符串或日期对象</td>
				</tr>
				<tr>
					<td><strong>flat</strong></td>
					<td>boolean</td>
					<td>无论如果日期选择器被添加到元素或由事件触发的。默认为false</td>
				</tr>
				<tr>
					<td><strong>start</strong></td>
					<td>integer</td>
					<td>天工作周的开始。默认值1日（星期一）</td>
				</tr>
				<tr>
					<td><strong>prev</strong></td>
					<td>string</td>
					<td>HTML插入到以前的链接。默认为“◀”（UNICODE 黑左箭头）</td>
				</tr>
				<tr>
					<td><strong>next</strong></td>
					<td>string</td>
					<td>HTML插入到下一个环节。默认为“▶”（UNICODE黑色右箭头）</td>
				</tr>
				<tr>
					<td><strong>mode</strong></td>
					<td>string ['single'|'multiple'|'range']</td>
					<td>日期选择模式。默认“单一”</td>
				</tr>
				<tr>
					<td><strong>view</strong></td>
					<td>string ['days'|'months'|'years']</td>
					<td>开始查看模式。默认'天'</td>
				</tr>
				<tr>
					<td><strong>calendars</strong></td>
					<td>integer</td>
					<td>日历的日期选择器内呈现的数目。默认值1</td>
				</tr>
				<tr>
					<td><strong>format</strong></td>
					<td>string</td>
					<td>日期格式。默认值“Y-M-D'</td>
				</tr>
				<tr>
					<td><strong>position</strong></td>
					<td>string ['top'|'left'|'right'|'bottom']</td>
					<td>日期选择器的相对位置的激活元素（非平面模式）。默认的“底部”</td>
				</tr>
				<tr>
					<td><strong>locale</strong></td>
					<td>hash</td>
					<td>地点:提供一个散列键“天”、“daysShort”、“daysMin”、“月”,“monthsShort”、“星期”。默认英语</td>
				</tr>
				<tr>
					<td><strong>onShow</strong></td>
					<td>function</td>
					<td>回调函数时触发显示日期选择器</td>
				</tr>
				<tr>
					<td><strong>onBeforeShow</strong></td>
					<td>function</td>
					<td>回调函数之前触发的日期选择器显示</td>
				</tr>
				<tr>
					<td><strong>onHide</strong></td>
					<td>function</td>
					<td>回调函数时触发日期选择器是隐藏的</td>
				</tr>
				<tr>
					<td><strong>onChange</strong></td>
					<td>function</td>
					<td>回调函数是改变时触发日期</td>
				</tr>
				<tr>
					<td><strong>onRender</strong></td>
					<td>function</td>
					<td>回调函数时触发日期呈现在一个日历。它应该返回和散列键:“选择”来选择日期,“残疾”来禁用日期”,类名“额外的CSS类</td>
				</tr>
			</table>
		</div>
	</div>
</div>

</body>
</html>
